<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../css/common/index.css">
    <link rel="stylesheet" href="../css/addPerson.css">
</head>

<body class="iframe">
    <div class="row-box add-person">
        <form class="layui-form" action="" lay-filter="searchForm">
            <div class="layui-row import-block">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header table-title">
                            <span>
                                数据录入
                            </span>
                        </div>
                        <div class="layui-card-body">
                            <div class="layui-row upload-btns">
                                <button type="button" class="layui-btn layui-btn-normal" id="uploadFile">
                                    <i class="layui-icon">&#xe67c;</i>上传文件
                                </button>
                                <button type="button" class="layui-btn layui-btn-normal" id="downLoadFile" onclick="_ft.downloadFile()">
                                    <i class="layui-icon">&#xe601;</i>下载模板
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header table-title">
                            <span>
                                添加人员
                            </span>
                        </div>
                        <div class="layui-card-body form-body">
                            <div class="layui-row flex-row">
                                <div class="form-items">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">姓名</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入姓名" type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">身份证号码</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入身份证号码" type="text" name="idCard" lay-verify="required" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">人员类型</label>
                                            <div class="layui-input-inline">
                                                <select name="personType">
                                                    <option value="">请选择人员类型</option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">所在单位</label>
                                            <div class="layui-input-inline">
                                                <select name="org1" lay-verify="" lay-search="">
                                                    <option value="">请选择所在单位</option>
                                                    <option value="1">layer</option>
                                                    <option value="2">form</option>
                                                    <option value="3">layim</option>
                                                    <option value="4">element</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">拟调入单位</label>
                                            <div class="layui-input-inline" style="width:518px;">
                                                <select name="org2" lay-verify="" lay-search="">
                                                    <option value="">请选择拟调入单位</option>
                                                    <option value="1">layer</option>
                                                    <option value="2">form</option>
                                                    <option value="3">layim</option>
                                                    <option value="4">element</option>
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">出生年月</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入出生年月" type="text" name="bornDate" id="date1" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">民族</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入民族" type="text" name="nation" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">性别</label>
                                            <div class="layui-input-inline">
                                                <input type="radio" name="sex" value="男" title="男" checked="">
                                                <input type="radio" name="sex" value="女" title="女">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">文化程度</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入文化程度" type="text" name="degree" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">政治面貌</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入政治面貌" type="text" name="policy" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">籍贯</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入籍贯" type="text" name="area" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <label class="layui-form-label">手机号码</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入手机号码" type="text" name="phone" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">微信号码</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入微信号码" type="text" name="wx" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <label class="layui-form-label">微博账号</label>
                                            <div class="layui-input-inline">
                                                <input placeholder="请输入微博账号" type="text" name="wb" lay-verify="" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="user-head">
                                    <input type="hidden" name="userHead" value="" />
                                    <img src="../images/person-default.png" id="headImg">
                                    <div class="layui-btn layui-btn-normal" id="uploadHead">上传照片</div>
                                </div>

                            </div>
                            <div class="layui-row">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">QQ号码</label>
                                        <div class="layui-input-inline">
                                            <input placeholder="请输入QQ号码" type="text" name="qq" lay-verify="" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">电子邮箱</label>
                                        <div class="layui-input-inline">
                                            <input placeholder="请输入电子邮箱" type="text" name="email" lay-verify="" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-inline" style="margin-right: 0;">
                                        <label class="layui-form-label">原籍地址</label>
                                        <div class="layui-input-inline" style="margin-right:0;width: 390px;">
                                            <input placeholder="请输入籍贯地址" type="text" name="orgArea" lay-verify="" autocomplete="off" class="layui-input">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-form-item" style="margin-bottom: 10px;">

                                    <label class="layui-form-label">出国情况</label>
                                    <div class="layui-input-inline" style="width: calc(100% - 120px);margin-right:0;">
                                        <textarea placeholder="请输入出国情况" class="layui-textarea" lay-verify="" name="abroad"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row">
                                <div class="layui-form-item" style="margin-bottom: 10px;">

                                    <label class="layui-form-label">个人简历</label>
                                    <div class="layui-input-inline" style="width: calc(100% - 120px);margin-right:0;">
                                        <textarea placeholder="请输入个人简历" class="layui-textarea" lay-verify="" name="desc"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-row home">
                                <div class="layui-form-item">
                                    <input type="hidden" name="home" value="" lay-verify="" />
                                    <label class="layui-form-label">家庭成员</label>
                                    <table class="layui-table" lay-filter="homeEdit" id="home">
                                    </table>
                                    <div class="add-btn-con">
                                        <div class="layui-btn layui-btn-fluid layui-btn-primary" onclick="_ft.addPerson()">新增成员</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body form-btns">
                            <div class="layui-row">

                                <div class="btns">
                                    <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="save">
                                        <i class="layui-icon layui-icon-search"></i>
                                        保存
                                    </button>
                                    <div class="layui-btn layui-btn-warm" onclick="_ft.cancel()">
                                        <i class="layui-icon layui-icon-delete"></i>
                                        取消
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script src="../../lib/jquery-1.9.1.min.js"></script>
    <script src="../../lib/layui/layui.all.js"></script>
    <script>
        (function () {
            var table = layui.table;
            var laydate = layui.laydate;
            var form = layui.form;
            var upload = layui.upload;
            form.verify({
                // 可编写校验方法
                // name: function (value, item) { //value：表单的值、item：表单的DOM对象
                //     if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                //         return '用户名不能有特殊字符';
                //     }
                //     if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                //         return '用户名首尾不能出现下划线\'_\'';
                //     }
                //     if (/^\d+\d+\d$/.test(value)) {
                //         return '用户名不能全为数字';
                //     }
                // }
            });
            var uploadInst = upload.render({
                elem: '#uploadHead'
                , url: '/upload/'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#headImg').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功，成功后获得地址
                    var path = "/somepath";
                    $('input[name="userHead"]').val(path);
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            //上传文件
            var uploadFile = upload.render({
                elem: '#uploadFile'
                , url: '/upload/'
                , accept: 'file'
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        console.log(file)
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    //上传成功后处理方法
                }
                , error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
            });
            laydate.render({
                elem: '#date1'
            });
            homeData = [
                { relation: '', name: '', idCard: '', org: '' },
                { relation: '', name: '', idCard: '', org: '' },
                { relation: '', name: '', idCard: '', org: '' }
            ]
            //监听单元格编辑
            table.on('edit(homeEdit)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layer.msg(field + ' 字段更改为：' + value);
                // homeData即改变后的数据源，可处理提交
                console.log(homeData)
            });
            form.on('submit(save)', function (data) {
                console.log(data)
                layer.msg('保存')
                return false;
            })
            var _ft = {
                init: function () {
                    this.renderTable();
                },
                downloadFile: function () {
                    layer.msg('下载模板')
                },
                cancel: function () {
                    layer.msg('取消')
                },
                addPerson: function () {
                    homeData.push({ relation: '', name: '', idCard: '', org: '' })
                    this.renderTable();
                },
                renderTable: function () {
                    table.render({
                        elem: '#home',
                        height: 160,
                        data: homeData,
                        cols: [[ //表头
                            { field: 'relation', minWidth: 100, edit: 'text' }
                            , { field: 'name', edit: 'text', minWidth: 80 }
                            , { field: 'idCard', minWidth: 150, edit: 'text' }
                            , { field: 'org', edit: 'text', minWidth: 200 }
                        ]]
                    })
                }
            };
            _ft.init();
            window._ft = _ft;
        })()
    </script>
</body>

</html>